<template>
  <div v-if="tags.length > 0"
    class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"
    style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
    <!-- 标签标题 -->
    <div class="flex mb-3">
      <h2 class="flex items-center font-bold text-gray-900 uppercase dark:text-white">
        <svg-icon class="inline icon w-4 h-4 mr-2" iconName="icon-biaoqian"></svg-icon>
        标签
      </h2>

      <!-- 占位 -->
      <span class="grow"></span>

      <!-- 查看更多 -->
      <a @click="router.push('/tag/list')" class=" bg-gray-100 flex items-center px-2.5 py-1 text-xs font-medium text-center 
          text-gray-900  rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 
          dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700
           dark:focus:ring-gray-700 hand-style">
        <svg class="w-[7px] h-[7px] text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 8 14">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1" />
        </svg>
      </a>
    </div>

    <!-- 标签列表 -->
    <div class=" h-auto">
      <span v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)"
        class="tag-item inline-block text-white text-xs mb-1 hand-style font-medium mr-2 px-2.5 py-0.5 rounded"
        :style="getBgColor()">
        {{ tag.name }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { getTagList } from '@/api/frontend/tag'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 所有标签
const tags = ref([])

// 获取标签列表（获取所有标签）
const getTags = async () => {
  const res = await getTagList()
  if (res.success) {
    tags.value = res.data
  }
}

getTags()

const router = useRouter()

// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
  // 跳转时通过 query 携带参数（标签 ID、标签名称）
  router.push({path: '/tag/article/list', query: {id, name}})
}

// 随机颜色数组
// const colorList = [
//   '#f68a90',
//   '#9fe286',
//   '#ffc07e',
//   '#b3adea',
//   '#6fc1ff',
//   '#83d4bf',
//   '#dabb9c',
//   '#aec7de',
//   '#ff936b'
// ]

// 随机颜色数组
const colorList = [
    'linear-gradient(to right, #FFF886 0%, #F072B6 100%)',
    'linear-gradient(to right, #EE9CA7 0%, #FFDDE1 100%)',
    'linear-gradient(to right, #4CA1AF 0%, #C4E0E5 100%)',
    'linear-gradient(to right, #FF626E 0%, #FFBE71 100%)',
    'linear-gradient(to right, #BB5571 0%, #F0C6B5 100%)',
    'linear-gradient(to right, #BC95C6 0%, #7DC4CC 100%)',
    'linear-gradient(to right, #6190E8 0%, #A7BFE8 100%)',
    'linear-gradient(to right, #4DA2CB 0%, #67B26F 100%)',
    'linear-gradient(to right, #0DCDA4 0%, #C2FCD4 100%)',
    'linear-gradient(to right, #06BEB6 0%, #028EA1 100%)',
    'linear-gradient(to right, #67F9D4 0%, #FF9554 100%)',
    'linear-gradient(to right, #F9957E 0%, #F3F5D0 100%)',
    'linear-gradient(to right, #FF9A9E 0%, #F6E745 100%)',
    'linear-gradient(to right, #18545A 0%, #F1F2B5 100%)',
    'linear-gradient(to right, #D39340 0%, #FFD194 100%)',
]

// 标签随机颜色
const getBgColor = () => {
  // let colorArr = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F".split(",")
  // let color = '#'
  // do {
  //     for (var i = 0; i < 6; i++) {
  //         color += colorArr[Math.floor(Math.random() * 16)];
  //     }
  // } while (color === '#FFFFFF' || color === '#000000');

  let n = Math.floor(Math.random() * 9)
  // return colorList[n]
  return { 
    background: colorList[n]  
  }
}


</script>
<style scoped>
/* .tag-item {
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #fff;
    transition: all .3s;
}
*/
.tag-item:hover {
    border-radius: 0;
    background: #000 !important;
} 
</style>